<template>
  <div class="search-container">
    <el-form :inline="true" class="search-form" ref="searchForm" :model="form">
      <!-- 动态生成搜索项 -->
      <el-form-item v-for="item in searchOptions" :key="item.key" :label="item.label" :prop="item.key">
        <!-- 自定义插槽 -->
        <slot v-if="item.type === 'slot'" :name="item.slotName || item.key" :item="item" :form="form" />

        <!-- 下拉选择框 -->
        <el-select v-else-if="item.type === 'select'" v-model="form[item.key]"
          :placeholder="item.placeholder || `请选择${item.label}`" :clearable="item.clearable !== undefined ? item.clearable : true"
          :style="item.style || 'width: 180px'">
          <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>

        <!-- 日期选择器 -->
        <el-date-picker v-else-if="item.type === 'date'" v-model="form[item.key]" :type="item.dateType || 'date'"
          :placeholder="item.placeholder || `选择${item.label}`" :value-format="item.valueFormat || 'yyyy-MM-dd'"
          :style="item.style || 'width: 180px'" />

        <!-- 日期范围选择 -->
        <el-date-picker v-else-if="item.type === 'daterange'" v-model="form[item.key]" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          :value-format="item.valueFormat || 'yyyy-MM-dd'" :style="item.style || 'width: 280px'" />

        <!-- 开关 -->
        <el-switch v-else-if="item.type === 'switch'" v-model="form[item.key]" :active-text="item.activeText || '是'"
          :inactive-text="item.inactiveText || '否'" />

        <!-- 文本输入框 -->
        <el-input v-else v-model="form[item.key]" :placeholder="item.placeholder || `请输入${item.label}`"
          :clearable="item.clearable !== undefined ? item.clearable : true" :style="item.style || 'width: 180px'" />
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item class="search-actions">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
        <slot name="extra-buttons" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    searchOptions: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return { 
      form: {} 
    }
  },
  created() {
    this.initForm();
  },
  watch: {
    searchOptions: {
      handler() {
        this.initForm();
      },
      immediate: true
    }
  },
  // watch: {
  // searchOptions: {
  //   handler(val) {
  //     console.log('watch-val', val);
  //   },
  //   deep: true

  // }
  // },
  methods: {
    // 初始化表单数据
    initForm() {
      const form = {}
      this.searchOptions.forEach(item => {
        form[item.key] = item.value !== undefined ? item.value :
          (item.type === 'switch' ? false :
            (item.type === 'daterange' ? [] : ''))
      })
      this.form = form;
    },
    
    // 搜索方法
    handleSearch() {
      // 深拷贝表单数据，避免引用问题
      const searchParams = JSON.parse(JSON.stringify(this.form))

      // 处理日期范围数据
      this.searchOptions.forEach(item => {
        if (item.type === 'daterange' && Array.isArray(searchParams[item.key])) {
          if (item.startKey && item.endKey) {
            searchParams[item.startKey] = searchParams[item.key][0]
            searchParams[item.endKey] = searchParams[item.key][1]
            delete searchParams[item.key]
          }
        }
      })

      this.$emit('search', searchParams)
    },

    // 重置表单
    resetForm() {
      this.$refs.searchForm.resetFields()

      // 特殊处理日期范围选择器
      this.searchOptions.forEach(item => {
        if (item.type === 'daterange') {
          this.form[item.key] = []
        }
      })

      // 重置后立即触发一次搜索
      this.$nextTick(() => {
        this.handleSearch()
      })
    },

    // 获取当前表单数据（供外部调用）
    getFormData() {
      return JSON.parse(JSON.stringify(this.form))
    }
  }
}
</script>

<style lang="scss" scoped></style>